<template>
  <div id="wrapper">
    <navigation></navigation>
    <div id="page-wrapper">
      <div class="row container-fluid">
        <table width="100%"
               class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline col-md-12"
               id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
          <thead>
          <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending"
                style="width: 284px;">设备名称
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Browser: activate to sort column ascending" style="width: 340px;">IP
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">端口
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">操作
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="gradeA even" role="row" v-for="host in getHostlist" :key="host.id">
            <td class="sorting_1">{{ host.name }}</td>
            <td>{{ host.ip }}</td>
            <td>{{ host.port }}</td>
            <td>
              <router-link :to="{name:'term',params:{id:host.id}}">连接远程电脑</router-link>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import api from '../api/host'

  function selectModal(state) {
    $('#createHost').modal(state)
  }

  var model = {
    ip: '',
    port: '',
    name: '',
    username: '',
    passwd: ''
  };
  export default {
    name: 'Host',
    data() {
      return {
        host: model
      }
    },
    created() {
      this.$store.dispatch("getIndexUserAndHost")
    },
    computed: {
      ...mapGetters({
        getHostlist: 'allUsersHostList'
      })
    },
    methods: {
      submit() {
        api.postHost(this.host, res => {
          this.$store.dispatch("createHostUpdateIndex", res.response)
          selectModal('hide')
        })
      },
      createHost() {
        this.host = model;
        selectModal("show");
      },
      delelte(id) {
        api.delete(id);
        this.$store.dispatch("deleteHostUpdateIndex", id)
      },
      updateForm(host) {
        this.host = host;
        selectModal('show')
      },
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .openssh-btn {
    margin: 20px 0px;
  }
</style>
